<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <!-- 项目的表单信息 -->
        <label style="margin-right: 5px">项目名称:</label>
        <el-input v-model="name" placeholder="请输入项目名称" style="width: 15%" @blur="pageQuery()" />
        <el-button type="primary" style="margin-left: 25px" @click="pageQuery()">查询</el-button>
        <el-button type="primary" style="float: right" @click="handleAddPro">+添加项目</el-button>
      </div>
      <el-table v-if="tableData.length" :data="tableData" class="tableBox" stripe>
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="username" label="项目负责人"></el-table-column>
        <el-table-column prop="statusToString" label="项目状态"></el-table-column>
        <el-table-column label="修改项目状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-text="scope.row.status == 1 ? '推进中' : scope.row.status == 2 ?'已完成': scope.row.status == 3 ?'项目已完成': scope.row.status == 4 ? '超时项目':'未启动'"
              @change="handleStatusChange(scope.row, $event)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="预计结束时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleUpdatePro(scope.row)">修改</el-button>
            <el-button type="text" @click="deletePro(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pageList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  selectProjectPages,
  updateStatusById,
  deleteProById
} from "@/api/project";
import Cookies from "js-cookie";
export default {
  name: "project",
  data() {
    return {
      name: "",
      page: 1, //页码
      pageSize: 10, //每页记录数
      total: 0, //总记录数
      //当前页要展示的数据集合
      tableData: []
    };
  },
  created() {
    this.pageQuery();
    this.loadTableData();
  },
  methods: {
    handleStatusChange(row, value) {
      updateStatusById(row.id).then(
        res => {
          if (res.data.code === 200) {
            this.saveTableData();
            this.pageQuery();
          } else if (res.data.code === 201){
            this.saveTableData();
            this.pageQuery();
          }
        },
        err => {
          alert(err.$message);
        }
      );
    },
    saveTableData() {
      // 将 tableData 保存到 Cookies
      Cookies.set("tableData", JSON.stringify(this.tableData));
    },
    loadTableData() {
      // 从 Cookies 加载 tableData
      const savedData = Cookies.get("tableData");
      if (savedData) {
        this.tableData = JSON.parse(savedData);
      }
    },
    async pageQuery() {
      try {
        const params = {
          name: this.name,
          page: this.page,
          pageSize: this.pageSize
        };
        const res = await selectProjectPages(params);
        if (res.data.code === 200) {
          this.total = res.data.data.total;
          this.tableData = res.data.data.records;
        }
      } catch (err) {
        this.$message.error("请求出错了：" + err.message);
      }
    },
    handleAddPro() {
      this.$router.push({
        path: "/layout/addPro"
      });
    },
    handleUpdatePro(row) {
      //跳转到修改页面，通过地址栏传递参数
      this.$router.push({
        path: "/layout/addPro",
        query: { id: row.id }
      });
    },
    deletePro(row) {
      //弹出确认提示框
      this.$confirm("确认要删除当前项目吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 删除接口
          deleteProById(row.id).then(res => {
            if (res.data.code === 200) {
              this.$message.success("项目删除成功！");
              this.pageQuery();
            }else{
              this.$message.error(res.data.msg)
            }
          });
        })
        .catch(e => e);
    },
    //pageSize发生变化时触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageQuery();
    },
    //page发生变化时触发
    handleCurrentChange(page) {
      this.page = page;
      this.pageQuery();
    }
  }
};
</script>

<style lang="less" scoped>
.disabled-text {
  color: #bac0cd !important;
}
.dashboard-container {
  .container {
    .tableBox {
      margin-top: 10px;
      width: 100%;
      border: 1px solid #c3c8ce;
      border-bottom: 0;
      .createTime {
        padding-left: 30px;
      }
    }
  }
}
</style>